introduce new app page layout

filter installed and not-installed apps properly

kill unneeded file

load category 'Installed' on page load

adding documentation links

new apps mgmt: first style adjustment

apps mgmt: only show license and preview if they exist

adding buttons

new apps mgmt: fix for mobile

use app icon if available

new apps mgmt: position enable/disable toggle to the right

new apps mgmt: proper display of icons or previews

new apps mgmt: fix loading spinner

reenable group selection for apps

new apps mgmt: position enable button normally again

new apps mgmt: clarify wording from 'Installed' to 'Enabled'

reintroduce enable/disable

Move rating image path generation to client-side

Move expression outside of l10n

fix group handling

add buttons for 'More apps' and 'Add your app' again

disable changed date of app for now

adding recommended label

style 'Recommended' app tag

fixing php warning

sort by rating

adding meta-category 'Recommended'

 Only show existing documentation links

lacy loading of screenshots

making group based app activation work again

adding support to get the app icon not only by the app name but also simply by the fixed name 'app.svg'

adding app.svg for all core apps

query string '?installed' is not longer needed

update and uninstall is back + error feedback

remove unneeded parameter

fix alignment of 'recommended' label

3 files changed, 232 insertions, 285 deletions

diff --git a/settings/js/apps-custom.php b/settings/js/apps-custom.php
deleted file mode 100644
index 2b2f256b39f..00000000000
--- a/settings/js/apps-custom.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php
-/**
- * Copyright (c) 2013 Lukas Reschke <lukas@statuscode.ch>
- * This file is licensed under the Affero General Public License version 3 or
- * later.
- * See the COPYING-README file.
- */
-
-// Check if admin user
-OC_Util::checkAdminUser();
-
-// Set the content type to JS
-header('Content-type: application/javascript');
-
-// Disallow caching
-header("Cache-Control: no-cache, must-revalidate"); 
-header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); 
-
-$combinedApps = OC_App::listAllApps();
-
-foreach($combinedApps as $app) {
-	echo("appData_".$app['id']."=".json_encode($app));
-	echo("\n");
-}
-
-echo ("var appid =".json_encode($_GET['appid']).";");
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 22bac1eaf3e..328c57db8ed 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -1,225 +1,235 @@
-/**
- * Copyright (c) 2011, Robin Appelman <icewind1991@gmail.com>
- * Copyright (c) 2012, Thomas Tanghus <thomas@tanghus.net>
- * This file is licensed under the Affero General Public License version 3 or later.
- * See the COPYING-README file.
- */
+/* global Handlebars */
+
+Handlebars.registerHelper('score', function() {
+	if(this.score) {
+		var score = Math.round( this.score / 10 );
+		var imageName = 'rating/s' + score + '.png';
+		
+		return new Handlebars.SafeString('<img src="' + OC.imagePath('core', imageName) + '">');
+	}
+	return new Handlebars.SafeString('');
+});
 
 OC.Settings = OC.Settings || {};
 OC.Settings.Apps = OC.Settings.Apps || {
-	setupGroupsSelect: function() {
-		OC.Settings.setupGroupsSelect($('#group_select'), {
+	setupGroupsSelect: function($elements) {
+		OC.Settings.setupGroupsSelect($elements, {
 			placeholder: t('core', 'All')
 		});
 	},
-	loadApp:function(app) {
-		var page = $('#app-content');
-		page.find('p.license').show();
-		page.find('span.name').text(app.name);
-		page.find('small.externalapp').text(app.internallabel);
-		if (app.version) {
-			page.find('span.version').text(app.version);
-		} else {
-			page.find('span.version').text('');
-		}
-		page.find('span.score').html(app.score);
-		page.find('p.description').text(app.description);
-		page.find('img.preview').attr('src', app.preview);
-		if (app.preview && app.preview.length) {
-			page.find('img.preview').show();
-		} else {
-			page.find('img.preview').hide();
-		}
-		page.find('small.externalapp').attr('style', 'visibility:visible');
-		page.find('span.author').text(app.author);
-
-		// FIXME licenses of downloaded apps go into app.licence, licenses of not-downloaded apps into app.license
-		var appLicense = '';
-		if (typeof(app.licence) !== 'undefined') {
-			appLicense = app.licence;
-		} else if (typeof(app.license) !== 'undefined') {
-			appLicense = app.license;
-		}
-		page.find('span.licence').text(appLicense);
-
-		var userDocumentation = false;
-		var adminDocumentation = false;
-		if (typeof(app.documentation) !== 'undefined') {
-			if (typeof(app.documentation.user) !== 'undefined') {
-				userDocumentation = true;
-				page.find('span.userDocumentation').html("<a id='userDocumentation' href='" + app.documentation.user + "'>" + t('settings', 'User Documentation') + "</a>");
-				page.find('p.documentation').show();
-			}
-			else {
-				page.find('span.userDocumentation').empty();
-				userDocumentation = false;
-			}
-			if (typeof(app.documentation.admin) !== 'undefined') {
-				adminDocumentation = true;
-				page.find('span.adminDocumentation').html("<a id='adminDocumentation' href='" + app.documentation.admin + "'>" + t('settings', 'Admin Documentation') + "</a>");
-				page.find('p.documentation').show();
-			}
-			else {
-				page.find('span.adminDocumentation').empty();
-				adminDocumentation = false;
-			}
 
-			if(userDocumentation && adminDocumentation) {
-				page.find('span.comma').remove();
-				page.find('span.userDocumentation').after('<span class="comma">, </span>');
-			}
-			else {
-				page.find('span.comma').remove();
+	State: {
+		currentCategory: null,
+		apps: null
+	},
+
+	loadCategories: function() {
+		var categories = [
+			{displayName: 'Enabled', id: '0'}
+		];
+
+		var source   = $("#categories-template").html();
+		var template = Handlebars.compile(source);
+		var html = template(categories);
+		$('#apps-categories').html(html);
+
+		OC.Settings.Apps.loadCategory(0);
+
+		$.ajax(OC.generateUrl('settings/apps/categories'), {
+			data:{},
+			type:'GET',
+			success:function (jsondata) {
+				var html = template(jsondata);
+				$('#apps-categories').html(html);
+				$('#app-category-' + OC.Settings.Apps.State.currentCategory).addClass('active');
+			},
+			complete: function() {
+				$('#app-navigation').removeClass('icon-loading');
 			}
-		}
-		else {
-			page.find('p.documentation').hide();
-		}
+		});
 
-		if (typeof(app.website) !== 'undefined') {
-			page.find('p.website').show();
-			page.find('a#websitelink').attr('href', app.website);
-		}
+	},
 
-		if (app.update !== false) {
-			page.find('input.update').show();
-			page.find('input.update').data('appid', app.id);
-			page.find('input.update').attr('value',t('settings', 'Update to {appversion}', {appversion:app.update}));
-		} else {
-			page.find('input.update').hide();
+	loadCategory: function(categoryId) {
+		if (OC.Settings.Apps.State.currentCategory === categoryId) {
+			return;
 		}
+		$('#apps-list')
+			.addClass('icon-loading')
+			.html('');
+		$('#app-category-' + OC.Settings.Apps.State.currentCategory).removeClass('active');
+		$('#app-category-' + categoryId).addClass('active');
+		OC.Settings.Apps.State.currentCategory = categoryId;
 
-		if (app.removable !== false && app.active === false) {
-			page.find('a.uninstall').show();
-			page.find('a.uninstall').data('appid', app.id);
-			page.find('a.uninstall').attr('value', t('settings', 'Uninstall App'));
-		} else {
-			page.find('a.uninstall').hide();
+		$.ajax(OC.generateUrl('settings/apps/list?category={categoryId}', {
+			categoryId: categoryId
+		}), {
+			data:{},
+			type:'GET',
+			success:function (apps) {
+				OC.Settings.Apps.State.apps = _.indexBy(apps.apps, 'id');
+				var source   = $("#app-template").html();
+				var template = Handlebars.compile(source);
+
+				_.each(apps.apps, function(app) {
+					OC.Settings.Apps.renderApp(app, template, null);
+				});
+			},
+			complete: function() {
+				$('#apps-list').removeClass('icon-loading');
+			}
+		});
+	},
+
+	renderApp: function(app, template, selector) {
+		if (!template) {
+			var source   = $("#app-template").html();
+			template = Handlebars.compile(source);
+		}
+		if (typeof app === 'string') {
+			app = OC.Settings.Apps.State.apps[app];
 		}
 
-		page.find('input.enable').show();
-		page.find('input.enable').val((app.active) ? t('settings', 'Disable') : t('settings', 'Enable'));
-		page.find('input.enable').data('appid', app.id);
-		page.find('input.enable').data('active', app.active);
-		if (app.internal === false) {
-			page.find('span.score').show();
-			page.find('p.appstore').show();
-			page.find('a#appstorelink').attr('href', 'http://apps.owncloud.com/content/show.php?content=' + app.id);
-			page.find('small.externalapp').hide();
+		var html = template(app);
+		if (selector) {
+			selector.html(html);
 		} else {
-			page.find('p.appslink').hide();
-			page.find('span.score').hide();
+			$('#apps-list').append(html);
 		}
-		if (typeof($('#app-navigation ul li[data-id="'+app.id+'"]').data('errormsg')) !== "undefined") {
-			page.find(".warning").show();
-			page.find(".warning").text($('#app-navigation ul li[data-id="'+app.id+'"]').data('errormsg'));
-		} else {
-			page.find(".warning").hide();
+
+		var page = $('#app-' + app.id);
+
+		// image loading kung-fu
+		if (app.preview) {
+			var currentImage = new Image();
+			currentImage.src = app.preview;
+
+			currentImage.onload = function() {
+				page.find('.app-image')
+					.append(this)
+					.fadeIn();
+			};
 		}
 
+		// set group select properly
 		if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
 			OC.Settings.Apps.isType(app, 'authentication') || OC.Settings.Apps.isType(app, 'logging')) {
-			page.find("#groups_enable").hide();
-			page.find("label[for='groups_enable']").hide();
-			page.find("#groups_enable").attr('checked', null);
+			page.find(".groups-enable").hide();
+			page.find("label[for='groups_enable-"+app.id+"']").hide();
+			page.find(".groups-enable").attr('checked', null);
 		} else {
+			page.find('#group_select').val((app.groups || []).join(','));
 			if (app.active) {
 				if (app.groups.length) {
-					OC.Settings.Apps.setupGroupsSelect();
-					$('#group_select').select2('val', app.groups || []);
-					page.find("#groups_enable").attr('checked','checked');
+					OC.Settings.Apps.setupGroupsSelect(page.find('#group_select'));
+					page.find(".groups-enable").attr('checked','checked');
 				} else {
-					page.find("#groups_enable").attr('checked', null);
+					page.find(".groups-enable").attr('checked', null);
 				}
-				page.find("#groups_enable").show();
-				page.find("label[for='groups_enable']").show();
+				page.find(".groups-enable").show();
+				page.find("label[for='groups_enable-"+app.id+"']").show();
 			} else {
-				page.find("#groups_enable").hide();
-				page.find("label[for='groups_enable']").hide();
+				page.find(".groups-enable").hide();
+				page.find("label[for='groups_enable-"+app.id+"']").hide();
 			}
 		}
 	},
-	enableApp:function(appid, active, element, groups) {
+
+	isType: function(app, type){
+		return app.types && app.types.indexOf(type) !== -1;
+	},
+
+	enableApp:function(appId, active, element, groups) {
+		OC.Settings.Apps.hideErrorMessage(appId);
 		groups = groups || [];
-		var appitem=$('#app-navigation ul li[data-id="'+appid+'"]');
+		var appItem = $('div#app-'+appId+'');
 		element.val(t('settings','Please wait....'));
 		if(active && !groups.length) {
-			$.post(OC.filePath('settings','ajax','disableapp.php'),{appid:appid},function(result) {
+			$.post(OC.filePath('settings','ajax','disableapp.php'),{appid:appId},function(result) {
 				if(!result || result.status !== 'success') {
 					if (result.data && result.data.message) {
-						OC.Settings.Apps.showErrorMessage(result.data.message);
-						appitem.data('errormsg', result.data.message);
+						OC.Settings.Apps.showErrorMessage(appId, result.data.message);
+						appItem.data('errormsg', result.data.message);
 					} else {
-						OC.Settings.Apps.showErrorMessage(t('settings', 'Error while disabling app'));
-						appitem.data('errormsg', t('settings', 'Error while disabling app'));
+						OC.Settings.Apps.showErrorMessage(appId, t('settings', 'Error while disabling app'));
+						appItem.data('errormsg', t('settings', 'Error while disabling app'));
 					}
 					element.val(t('settings','Disable'));
-					appitem.addClass('appwarning');
-				}
-				else {
-					appitem.data('active',false);
-					appitem.data('groups', '');
+					appItem.addClass('appwarning');
+				} else {
+					appItem.data('active',false);
+					appItem.data('groups', '');
 					element.data('active',false);
-					OC.Settings.Apps.removeNavigation(appid);
-					appitem.removeClass('active');
+					OC.Settings.Apps.removeNavigation(appId);
+					appItem.removeClass('active');
 					element.val(t('settings','Enable'));
-					element.parent().find("#groups_enable").hide();
-					element.parent().find("label[for='groups_enable']").hide();
-					var app = OC.get('appData_' + appid);
-					app.active = false;
+					element.parent().find(".groups-enable").hide();
+					element.parent().find("#groups_enable-"+appId).hide();
+					element.parent().find("label[for='groups_enable-"+appId+"']").hide();
+					element.parent().find('#group_select').hide().val(null);
+					OC.Settings.Apps.State.apps[appId].active = false;
 				}
 			},'json');
 		} else {
-			$.post(OC.filePath('settings','ajax','enableapp.php'),{appid: appid, groups: groups},function(result) {
+			$.post(OC.filePath('settings','ajax','enableapp.php'),{appid: appId, groups: groups},function(result) {
 				if(!result || result.status !== 'success') {
 					if (result.data && result.data.message) {
-						OC.Settings.Apps.showErrorMessage(result.data.message);
-						appitem.data('errormsg', result.data.message);
+						OC.Settings.Apps.showErrorMessage(appId, result.data.message);
+						appItem.data('errormsg', result.data.message);
 					} else {
-						OC.Settings.Apps.showErrorMessage(t('settings', 'Error while enabling app'));
-						appitem.data('errormsg', t('settings', 'Error while disabling app'));
+						OC.Settings.Apps.showErrorMessage(appId, t('settings', 'Error while enabling app'));
+						appItem.data('errormsg', t('settings', 'Error while disabling app'));
 					}
 					element.val(t('settings','Enable'));
-					appitem.addClass('appwarning');
+					appItem.addClass('appwarning');
 				} else {
-					OC.Settings.Apps.addNavigation(appid);
-					appitem.data('active',true);
+					OC.Settings.Apps.addNavigation(appId);
+					appItem.data('active',true);
 					element.data('active',true);
-					appitem.addClass('active');
+					appItem.addClass('active');
 					element.val(t('settings','Disable'));
-					var app = OC.get('appData_' + appid);
+					var app = OC.Settings.Apps.State.apps[appId];
 					app.active = true;
+
 					if (OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
 						OC.Settings.Apps.isType(app, 'authentication') || OC.Settings.Apps.isType(app, 'logging')) {
-						element.parent().find("#groups_enable").hide();
-						element.parent().find("label[for='groups_enable']").hide();
+						element.parent().find(".groups-enable").attr('checked', null);
+						element.parent().find("#groups_enable-"+appId).hide();
+						element.parent().find("label[for='groups_enable-"+appId+"']").hide();
+						element.parent().find(".groups-enable").hide();
+						element.parent().find("#groups_enable-"+appId).hide();
+						element.parent().find("label[for='groups_enable-"+appId+"']").hide();
+						element.parent().find('#group_select').hide().val(null);
 					} else {
-						element.parent().find("#groups_enable").show();
-						element.parent().find("label[for='groups_enable']").show();
+						element.parent().find("#groups_enable-"+appId).show();
+						element.parent().find("label[for='groups_enable-"+appId+"']").show();
 						if (groups) {
-							appitem.data('groups', JSON.stringify(groups));
+							appItem.data('groups', JSON.stringify(groups));
 						} else {
-							appitem.data('groups', '');
+							appItem.data('groups', '');
 						}
 					}
 				}
 			},'json')
-			.fail(function() {
-				OC.Settings.Apps.showErrorMessage(t('settings', 'Error while enabling app'));
-				appitem.data('errormsg', t('settings', 'Error while enabling app'));
-				appitem.data('active',false);
-				appitem.addClass('appwarning');
-				OC.Settings.Apps.removeNavigation(appid);
-				element.val(t('settings','Enable'));
-			});
+				.fail(function() {
+					OC.Settings.Apps.showErrorMessage(appId, t('settings', 'Error while enabling app'));
+					appItem.data('errormsg', t('settings', 'Error while enabling app'));
+					appItem.data('active',false);
+					appItem.addClass('appwarning');
+					OC.Settings.Apps.removeNavigation(appId);
+					element.val(t('settings','Enable'));
+				});
 		}
 	},
-	updateApp:function(appid, element) {
+
+	updateApp:function(appId, element) {
+		var oldButtonText = element.val();
 		element.val(t('settings','Updating....'));
-		$.post(OC.filePath('settings','ajax','updateapp.php'),{appid:appid},function(result) {
+		OC.Settings.Apps.hideErrorMessage(appId);
+		$.post(OC.filePath('settings','ajax','updateapp.php'),{appid:appId},function(result) {
 			if(!result || result.status !== 'success') {
-				OC.Settings.Apps.showErrorMessage(t('settings','Error while updating app'),t('settings','Error'));
-				element.val(t('settings','Update'));
+				OC.Settings.Apps.showErrorMessage(appId, t('settings','Error while updating app'));
+				element.val(oldButtonText);
 			}
 			else {
 				element.val(t('settings','Updated'));
@@ -227,42 +237,25 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			}
 		},'json');
 	},
-	uninstallApp:function(appid, element) {
+
+	uninstallApp:function(appId, element) {
+		OC.Settings.Apps.hideErrorMessage(appId);
 		element.val(t('settings','Uninstalling ....'));
-		$.post(OC.filePath('settings','ajax','uninstallapp.php'),{appid:appid},function(result) {
+		$.post(OC.filePath('settings','ajax','uninstallapp.php'),{appid:appId},function(result) {
 			if(!result || result.status !== 'success') {
-				OC.Settings.Apps.showErrorMessage(t('settings','Error while uninstalling app'),t('settings','Error'));
+				OC.Settings.Apps.showErrorMessage(appId, t('settings','Error while uninstalling app'));
 				element.val(t('settings','Uninstall'));
 			} else {
-				OC.Settings.Apps.removeNavigation(appid);
-				var appItem = $('#app-navigation li').filterAttr('data-id', appid);
-				appItem.removeClass('active');
+				OC.Settings.Apps.removeNavigation(appId);
+				element.parent().fadeOut(function() {
+					element.remove();
+				});
 			}
 		},'json');
 	},
 
-	insertApp:function(appdata) {
-		var applist = $('#app-navigation ul li');
-		var app =
-				$('<li data-id="' + appdata.id + '" data-type="external" data-installed="0">'
-				+ '<a class="app externalapp" href="' + OC.filePath('settings', 'apps', 'index.php') + '&appid=' + appdata.id+'">'
-				+ appdata.name+'</a><small class="externalapp list">3rd party</small></li>');
-		app.data('app', appdata);
-		var added = false;
-		applist.each(function() {
-			if(!parseInt($(this).data('installed')) && $(this).find('a').text().toLowerCase() > appdata.name.toLowerCase()) {
-				$(this).before(app);
-				added = true;
-				return false; // dang, remember this to get out of loop
-			}
-		});
-		if(!added) {
-			applist.last().after(app);
-		}
-		return app;
-	},
-	removeNavigation: function(appid){
-		$.getJSON(OC.filePath('settings', 'ajax', 'navigationdetect.php'), {app: appid}).done(function(response){
+	removeNavigation: function(appId){
+		$.getJSON(OC.filePath('settings', 'ajax', 'navigationdetect.php'), {app: appId}).done(function(response){
 			if(response.status === 'success'){
 				var navIds=response.nav_ids;
 				for(var i=0; i< navIds.length; i++){
@@ -310,107 +303,87 @@ OC.Settings.Apps = OC.Settings.Apps || {
 							.animate({opacity: 1})
 							.animate({opacity: 0.75});
 
-						if (!SVGSupport() && entry.icon.match(/\.svg$/i)) {
+						if (!OC.Util.hasSVGSupport() && entry.icon.match(/\.svg$/i)) {
 							$(img).addClass('svg');
-							replaceSVG();
+							OC.Util.replaceSVG();
 						}
 					}
 				}
 			}
 		});
 	},
-	showErrorMessage: function(message) {
-		$('.appinfo .warning').show();
-		$('.appinfo .warning').text(message);
+
+	showErrorMessage: function(appId, message) {
+		$('div#app-'+appId+' .warning')
+			.show()
+			.text(message);
 	},
-	isType: function(app, type){
-		return app.types && app.types.indexOf(type) !== -1;
+
+	hideErrorMessage: function(appId) {
+		$('div#app-'+appId+' .warning')
+			.hide()
+			.text('');
 	}
+
 };
 
-$(document).ready(function(){
-	$('#app-navigation ul li').each(function(index,li){
-		var app = OC.get('appData_'+$(li).data('id'));
-		if (app) {
-			app.groups= $(li).data('groups') || [];
-		}
-		$(li).data('app',app);
-		$(this).find('span.hidden').remove();
-	});
-	$('#app-navigation ul li').keydown(function(event) {
-		if (event.which === 13 || event.which === 32) {
-			$(event.target).click();
-		}
-		return false;
-	});
+$(document).ready(function () {
+	OC.Settings.Apps.loadCategories();
 
-	$(document).on('click', '#app-navigation', function(event){
-		var tgt = $(event.target);
-		if (tgt.is('li') || tgt.is('a')) {
-			var item = tgt.is('li') ? $(tgt) : $(tgt).parent();
-			var app = item.data('app');
-			OC.Settings.Apps.loadApp(app);
-			$('#app-navigation .selected').removeClass('selected');
-			item.addClass('selected');
-		}
-		return false;
+	$(document).on('click', 'ul#apps-categories li', function () {
+		var categoryId = $(this).data('categoryId');
+		OC.Settings.Apps.loadCategory(categoryId);
 	});
-	$('#app-content input.enable').click(function(){
+
+	$(document).on('click', '#apps-list input.enable', function () {
+		var appId = $(this).data('appid');
 		var element = $(this);
-		var appid=$(this).data('appid');
-		var active=$(this).data('active');
-		if(appid) {
-			OC.Settings.Apps.enableApp(appid, active, element);
-		}
+		var active = $(this).data('active');
+
+		OC.Settings.Apps.enableApp(appId, active, element);
 	});
-	$('#app-content input.update').click(function(){
+
+	$(document).on('click', '#apps-list input.uninstall', function () {
+		var appId = $(this).data('appid');
 		var element = $(this);
-		var appid=$(this).data('appid');
-		if(appid) {
-			OC.Settings.Apps.updateApp(appid, element);
-		}
+
+		OC.Settings.Apps.uninstallApp(appId, element);
 	});
-	$('#app-content a.uninstall').click(function(){
+
+	$(document).on('click', '#apps-list input.update', function () {
+		var appId = $(this).data('appid');
 		var element = $(this);
-		var appid=$(this).data('appid');
-		if(appid) {
-			OC.Settings.Apps.uninstallApp(appid, element);
-		}
+
+		OC.Settings.Apps.updateApp(appId, element);
 	});
 
-	$('#group_select').change(function(ev) {
-		var element = $('#app-content input.enable');
-		// getting an array of values from select2
-		var groups = ev.val || [];
-		var appid = element.data('appid');
-		if (appid) {
-			OC.Settings.Apps.enableApp(appid, false, element, groups);
-			var li = $('[data-id="'+appid+'"]');
-			var app = OC.get('appData_' + $(li).data('id'));
-			app.groups = groups;
-			li.data('groups', groups);
-			li.attr('data-groups', JSON.stringify(groups));
+	$(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 = [];
 		}
-	});
 
-	if(appid) {
-		var item = $('#app-navigation ul li[data-id="'+appid+'"]');
-		if(item) {
-			item.trigger('click');
-			item.addClass('active');
-			$('#app-navigation').animate({scrollTop: item.offset().top-70}, 'slow','swing');
+		var appId = element.data('appid');
+		if (appId) {
+			OC.Settings.Apps.enableApp(appId, false, element, groups);
+			OC.Settings.Apps.State.apps[appId].groups = groups;
 		}
-	}
+	});
 
-	$("#groups_enable").change(function() {
-		var $select = $('#group_select');
+	$(document).on('change', ".groups-enable", function() {
+		var $select = $(this).parent().find('#group_select');
 		$select.val('');
+
 		if (this.checked) {
-			OC.Settings.Apps.setupGroupsSelect();
-		}
-		else {
+			OC.Settings.Apps.setupGroupsSelect($select);
+		} else {
 			$select.select2('destroy');
 		}
+
 		$select.change();
 	});
+
 });
diff --git a/settings/js/old-apps.js b/settings/js/old-apps.js
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/settings/js/old-apps.js