Merge pull request #13439 from owncloud/app-filter

Make the search box filter apps

core/css/apps.css

@@ -485,6 +485,9 @@ button.loading {
 	color: #555;
 	border-top: 1px solid #ddd;
 }
+.section.hidden {
+	display: none !important;
+}
 /* no top border for first settings item */
 #app-content > .section:first-child {
 	border-top: none;

settings/js/apps.js

@@ -330,67 +330,104 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		$('div#app-'+appId+' .warning')
 			.hide()
 			.text('');
-	}
+	},
 
+	filter: function(query) {
+		query = query.toLowerCase();
+		$('#apps-list').find('.section').addClass('hidden');
+
+		var apps = _.filter(OC.Settings.Apps.State.apps, function (app) {
+			return app.name.toLowerCase().indexOf(query) !== -1;
+		});
+
+		apps = apps.concat(_.filter(OC.Settings.Apps.State.apps, function (app) {
+			return app.description.toLowerCase().indexOf(query) !== -1;
+		}));
+
+		apps = _.uniq(apps, function(app){return app.id;});
+
+		_.each(apps, function (app) {
+			$('#app-' + app.id).removeClass('hidden');
+		});
+
+		$('#searchresults').hide();
+	},
+
+	/**
+	 * Initializes the apps list
+	 */
+	initialize: function($el) {
+		OC.Plugins.register('OCA.Search', OC.Settings.Apps.Search);
+		OC.Settings.Apps.loadCategories();
+
+		$(document).on('click', 'ul#apps-categories li', function () {
+			var categoryId = $(this).data('categoryId');
+			OC.Settings.Apps.loadCategory(categoryId);
+		});
+
+		$(document).on('click', '#apps-list input.enable', function () {
+			var appId = $(this).data('appid');
+			var element = $(this);
+			var active = $(this).data('active');
+
+			OC.Settings.Apps.enableApp(appId, active, element);
+		});
+
+		$(document).on('click', '#apps-list input.uninstall', function () {
+			var appId = $(this).data('appid');
+			var element = $(this);
+
+			OC.Settings.Apps.uninstallApp(appId, element);
+		});
+
+		$(document).on('click', '#apps-list input.update', function () {
+			var appId = $(this).data('appid');
+			var element = $(this);
+
+			OC.Settings.Apps.updateApp(appId, element);
+		});
+
+		$(document).on('change', '#group_select', function() {
+			var element = $(this).parent().find('input.enable');
+			var groups = $(this).val();
+			if (groups && groups !== '') {
+				groups = groups.split(',');
+			} else {
+				groups = [];
+			}
+
+			var appId = element.data('appid');
+			if (appId) {
+				OC.Settings.Apps.enableApp(appId, false, element, groups);
+				OC.Settings.Apps.State.apps[appId].groups = groups;
+			}
+		});
+
+		$(document).on('change', ".groups-enable", function() {
+			var $select = $(this).parent().find('#group_select');
+			$select.val('');
+
+			if (this.checked) {
+				OC.Settings.Apps.setupGroupsSelect($select);
+			} else {
+				$select.select2('destroy');
+			}
+
+			$select.change();
+		});
+
+	}
+};
+
+OC.Settings.Apps.Search = {
+	attach: function (search) {
+		search.setFilter('settings', OC.Settings.Apps.filter);
+	}
 };
 
 $(document).ready(function () {
-	OC.Settings.Apps.loadCategories();
+	// HACK: FIXME: use plugin approach
-
+	if (!window.TESTING) {
-	$(document).on('click', 'ul#apps-categories li', function () {
+		OC.Settings.Apps.initialize($('#apps-list'));
-		var categoryId = $(this).data('categoryId');
+	}
-		OC.Settings.Apps.loadCategory(categoryId);
-	});
-
-	$(document).on('click', '#apps-list input.enable', function () {
-		var appId = $(this).data('appid');
-		var element = $(this);
-		var active = $(this).data('active');
-
-		OC.Settings.Apps.enableApp(appId, active, element);
-	});
-
-	$(document).on('click', '#apps-list input.uninstall', function () {
-		var appId = $(this).data('appid');
-		var element = $(this);
-
-		OC.Settings.Apps.uninstallApp(appId, element);
-	});
-
-	$(document).on('click', '#apps-list input.update', function () {
-		var appId = $(this).data('appid');
-		var element = $(this);
-
-		OC.Settings.Apps.updateApp(appId, element);
-	});
-
-	$(document).on('change', '#group_select', function() {
-		var element = $(this).parent().find('input.enable');
-		var groups = $(this).val();
-		if (groups && groups !== '') {
-			groups = groups.split(',');
-		} else {
-			groups = [];
-		}
-
-		var appId = element.data('appid');
-		if (appId) {
-			OC.Settings.Apps.enableApp(appId, false, element, groups);
-			OC.Settings.Apps.State.apps[appId].groups = groups;
-		}
-	});
-
-	$(document).on('change', ".groups-enable", function() {
-		var $select = $(this).parent().find('#group_select');
-		$select.val('');
-
-		if (this.checked) {
-			OC.Settings.Apps.setupGroupsSelect($select);
-		} else {
-			$select.select2('destroy');
-		}
-
-		$select.change();
-	});
-
 });

settings/tests/js/appsSpec.js

@@ -0,0 +1,101 @@
+/**
+* ownCloud
+*
+* @author Vincent Petry
+* @copyright 2015 Vincent Petry <pvince81@owncloud.com>
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+* License as published by the Free Software Foundation; either
+* version 3 of the License, or any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+*
+* You should have received a copy of the GNU Affero General Public
+* License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+*
+*/
+
+describe('OC.Settings.Apps tests', function() {
+	var Apps;
+
+	beforeEach(function() {
+		var $el = $('<div id="apps-list"></div>' +
+			'<div id="app-template">' +
+			// dummy template for testing
+			'<div id="app-{{id}}" data-id="{{id}}" class="section">{{name}}</div>' +
+			'</div>'
+		);
+		$('#testArea').append($el);
+
+		Apps = OC.Settings.Apps;
+	});
+	afterEach(function() {
+		Apps.State.apps = null;
+		Apps.State.currentCategory = null;
+	});
+
+	describe('Filtering apps', function() {
+		var oldApps;
+
+		function loadApps(appList) {
+			Apps.State.apps = appList;
+
+			_.each(appList, function(appSpec) {
+				Apps.renderApp(appSpec);
+			});
+		}
+
+		function getResultsFromDom() {
+			var results = [];
+			$('#apps-list .section:not(.hidden)').each(function() {
+				results.push($(this).attr('data-id'));
+			});
+			return results;
+		}
+
+		beforeEach(function() {
+			loadApps([
+				{id: 'appone', name: 'App One', description: 'The first app'},
+				{id: 'apptwo', name: 'App Two', description: 'The second app'},
+				{id: 'appthree', name: 'App Three', description: 'Third app'},
+				{id: 'somestuff', name: 'Some Stuff', description: 'whatever'}
+			]);
+		});
+
+		it('does not filter when no query passed', function() {
+			Apps.filter('');
+			expect(getResultsFromDom().length).toEqual(4);
+		});
+		it('returns no results when query does not match anything', function() {
+			Apps.filter('absurdity');
+			expect(getResultsFromDom().length).toEqual(0);
+		});
+		it('returns relevant results when query matches name', function() {
+			var results;
+			Apps.filter('app');
+			results = getResultsFromDom();
+			expect(results.length).toEqual(3);
+			expect(results[0]).toEqual('appone');
+			expect(results[1]).toEqual('apptwo');
+			expect(results[2]).toEqual('appthree');
+		});
+		it('returns relevant result when query matches name', function() {
+			var results;
+			Apps.filter('TWO');
+			results = getResultsFromDom();
+			expect(results.length).toEqual(1);
+			expect(results[0]).toEqual('apptwo');
+		});
+		it('returns relevant result when query matches description', function() {
+			var results;
+			Apps.filter('ever');
+			results = getResultsFromDom();
+			expect(results.length).toEqual(1);
+			expect(results[0]).toEqual('somestuff');
+		});
+	});
+});

tests/karma.config.js

@@ -71,9 +71,13 @@ module.exports = function(config) {
 			{
 				name: 'settings',
 				srcFiles: [
+					'settings/js/apps.js',
 					'settings/js/users/deleteHandler.js'
 				],
-				testFiles: ['settings/tests/js/users/deleteHandlerSpec.js']
+				testFiles: [
+					'settings/tests/js/appsSpec.js',
+					'settings/tests/js/users/deleteHandlerSpec.js'
+				]
 			}
 		];
 	}