Merge pull request #18083 from owncloud/user-search-box

use the main search box to filter users in user management

settings/js/users/filter.js

@@ -7,16 +7,13 @@
 /**
  * @brief this object takes care of the filter functionality on the user
  * management page
- * @param jQuery input element that works as the user text input field
- * @param object the UserList object
+ * @param {UserList} userList the UserList object
+ * @param {GroupList} groupList the GroupList object
  */
-function UserManagementFilter(filterInput, userList, groupList) {
-	this.filterInput = filterInput;
+function UserManagementFilter (userList, groupList) {
 	this.userList = userList;
 	this.groupList = groupList;
-	this.filterGroups = false;
-	this.thread = undefined;
-	this.oldval = this.filterInput.val();
+	this.oldFilter = '';
 
 	this.init();
 }
@@ -24,39 +21,23 @@ function UserManagementFilter(filterInput, userList, groupList) {
 /**
  * @brief sets up when the filter action shall be triggered
  */
-UserManagementFilter.prototype.init = function() {
-	var umf = this;
-	this.filterInput.keyup(function(e) {
-		//we want to react on any printable letter, plus on modifying stuff like
-		//Backspace and Delete. extended https://stackoverflow.com/a/12467610
-		var valid =
-			e.keyCode ===  0 || e.keyCode ===  8  || // like ö or ж; backspace
-			e.keyCode ===  9 || e.keyCode === 46  || // tab; delete
-			e.keyCode === 32                      || // space
-			(e.keyCode >  47 && e.keyCode <   58) || // number keys
-			(e.keyCode >  64 && e.keyCode <   91) || // letter keys
-			(e.keyCode >  95 && e.keyCode <  112) || // numpad keys
-			(e.keyCode > 185 && e.keyCode <  193) || // ;=,-./` (in order)
-			(e.keyCode > 218 && e.keyCode <  223);   // [\]' (in order)
-
-		//besides the keys, the value must have been changed compared to last
-		//time
-		if(valid && umf.oldVal !== umf.getPattern()) {
-			umf.run();
-		}
-
-		umf.oldVal = umf.getPattern();
-	});
+UserManagementFilter.prototype.init = function () {
+	OC.Plugins.register('OCA.Search', this);
 };
 
 /**
  * @brief the filter action needs to be done, here the accurate steps are being
  * taken care of
  */
-UserManagementFilter.prototype.run = _.debounce(function() {
+UserManagementFilter.prototype.run = _.debounce(function (filter) {
+		if (filter === this.oldFilter) {
+			return;
+		}
+		this.oldFilter = filter;
+		this.userList.filter = filter;
 		this.userList.empty();
 		this.userList.update(GroupList.getCurrentGID());
-		if(this.filterGroups) {
+		if (this.groupList.filterGroups) {
 			// user counts are being updated nevertheless
 			this.groupList.empty();
 		}
@@ -69,12 +50,12 @@ UserManagementFilter.prototype.run = _.debounce(function() {
  * @brief returns the filter String
  * @returns string
  */
-UserManagementFilter.prototype.getPattern = function() {
+UserManagementFilter.prototype.getPattern = function () {
 	var input = this.filterInput.val(),
 		html = $('html'),
 		isIE8or9 = html.hasClass('lte9');
 	// FIXME - TODO - once support for IE8 and IE9 is dropped
-	if(isIE8or9 && input == this.filterInput.attr('placeholder')) {
+	if (isIE8or9 && input == this.filterInput.attr('placeholder')) {
 		input = '';
 	}
 	return input;
@@ -84,10 +65,14 @@ UserManagementFilter.prototype.getPattern = function() {
  * @brief adds reset functionality to an HTML element
  * @param jQuery the jQuery representation of that element
  */
-UserManagementFilter.prototype.addResetButton = function(button) {
+UserManagementFilter.prototype.addResetButton = function (button) {
 	var umf = this;
-	button.click(function(){
+	button.click(function () {
 		umf.filterInput.val('');
 		umf.run();
 	});
 };
+
+UserManagementFilter.prototype.attach = function (search) {
+	search.setFilter('settings', this.run.bind(this));
+};

settings/js/users/groups.js

@@ -12,6 +12,8 @@ var GroupList;
 GroupList = {
 	activeGID: '',
 	everyoneGID: '_everyone',
+	filter: '',
+	filterGroups: false,
 
 	addGroup: function (gid, usercount) {
 		var $li = $userGroupList.find('.isgroup:last-child').clone();
@@ -145,8 +147,8 @@ GroupList = {
 		$.get(
 			OC.generateUrl('/settings/users/groups'),
 			{
-				pattern: filter.getPattern(),
-				filterGroups: filter.filterGroups ? 1 : 0,
+				pattern: this.filter,
+				filterGroups: this.filterGroups ? 1 : 0,
 				sortGroups: $sortGroupBy
 			},
 			function (result) {

settings/js/users/users.js

@@ -8,13 +8,13 @@
 
 var $userList;
 var $userListBody;
-var filter;
 
 var UserList = {
 	availableGroups: [],
 	offset: 0,
 	usersToLoad: 10, //So many users will be loaded when user scrolls down
 	currentGid: '',
+	filter: '',
 
 	/**
 	 * Initializes the user list
@@ -229,7 +229,7 @@ var UserList = {
 		return aa.length - bb.length;
 	},
 	preSortSearchString: function(a, b) {
-		var pattern = filter.getPattern();
+		var pattern = this.filter;
 		if(typeof pattern === 'undefined') {
 			return undefined;
 		}
@@ -398,7 +398,7 @@ var UserList = {
 			gid = '';
 		}
 		UserList.currentGid = gid;
-		var pattern = filter.getPattern();
+		var pattern = this.filter;
 		$.get(
 			OC.generateUrl('/settings/users/users'),
 			{ offset: UserList.offset, limit: limit, gid: gid, pattern: pattern },
@@ -612,7 +612,7 @@ $(document).ready(function () {
 	UserList.initDeleteHandling();
 
 	// Implements User Search
-	filter = new UserManagementFilter($('#usersearchform input'), UserList, GroupList);
+	OCA.Search.users= new UserManagementFilter(UserList, GroupList);
 
 	UserList.doSort();
 	UserList.availableGroups = $userList.data('groups');

settings/templates/users/part.createuser.php

@@ -31,7 +31,4 @@
 		   alt="<?php p($l->t('Enter the recovery password in order to recover the users files during password change'))?>"/>
 	</div>
 	<?php endif; ?>
-	<form autocomplete="off" id="usersearchform">
-		<input type="text" class="input userFilter" placeholder="<?php p($l->t('Search Users')); ?>" />
-	</form>
 </div>