Fixed external storage status indicator in admin page

- Fixes #5241
- Fixed indicator to appear, its selector was wrong
- Added spinner while saving an entry's settings
- Removed ajax "async: false" that blocked the browser while saving

2 files changed, 32 insertions, 26 deletions

diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.css
index f2f40247b28..74b14028468 100644
--- a/apps/files_external/css/settings.css
+++ b/apps/files_external/css/settings.css
@@ -4,7 +4,9 @@ td.status > span {
 	width: 16px;
 	vertical-align: text-bottom;
 }
-
+span.loading{
+	background-size: 16px 16px;
+}
 span.success {
 	background: #37ce02;
 	border-radius: 8px;
@@ -12,9 +14,6 @@ span.success {
 span.error {
 	background: #ce3702;
 }
-span.waiting {
-	background: none;
-}
 
 td.mountPoint, td.backend { width:10em; }
 td.remove>img { visibility:hidden; padding-top:0.8em; }
diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index 3e605c59a93..3e92bc87e85 100644
--- a/apps/files_external/js/settings.js
+++ b/apps/files_external/js/settings.js
@@ -1,10 +1,23 @@
+(function(){
+
+function updateStatus(statusEl, result){
+	statusEl.removeClass('success error loading');
+	if (result && result.status == 'success' && result.data.message) {
+		statusEl.addClass('success');
+		return true;
+	} else {
+		statusEl.addClass('error');
+		return false;
+	}
+}
+
 OC.MountConfig={
 	saveStorage:function(tr) {
 		var mountPoint = $(tr).find('.mountPoint input').val();
 		if (mountPoint == '') {
 			return false;
 		}
-		var statusSpan = $(tr).find('.status span');
+		var statusSpan = $(tr).closest('tr').find('.status span');
 		var backendClass = $(tr).find('.backend').data('class');
 		var configuration = $(tr).find('.configuration input');
 		var addMountPoint = true;
@@ -58,6 +71,7 @@ OC.MountConfig={
 						}
 						users.push(applicable);
 					}
+					statusSpan.addClass('loading').removeClass('error success');
 					$.ajax({type: 'POST',
 						url: OC.filePath('files_external', 'ajax', 'addMountPoint.php'),
 						data: {
@@ -68,15 +82,11 @@ OC.MountConfig={
 							applicable: applicable,
 							isPersonal: isPersonal
 						},
-						async: false,
 						success: function(result) {
-							statusSpan.removeClass();
-							if (result && result.status == 'success' && result.data.message) {
-								status = true;
-								statusSpan.addClass('success');
-							} else {
-								statusSpan.addClass('error');
-							}
+							status = updateStatus(statusSpan, result);
+						},
+						error: function(result){
+							status = updateStatus(statusSpan, result);
 						}
 					});
 				});
@@ -93,8 +103,7 @@ OC.MountConfig={
 							mountType: mountType,
 							applicable: applicable,
 							isPersonal: isPersonal
-						},
-						async: false
+						}
 					});
 				});
 				var mountType = 'user';
@@ -108,14 +117,14 @@ OC.MountConfig={
 							mountType: mountType,
 							applicable: applicable,
 							isPersonal: isPersonal
-						},
-						async: false
+						}
 					});
 				});
 			} else {
 				var isPersonal = true;
 				var mountType = 'user';
 				var applicable = OC.currentUser;
+				statusSpan.addClass('loading').removeClass('error success');
 				$.ajax({type: 'POST',
 					url: OC.filePath('files_external', 'ajax', 'addMountPoint.php'),
 					data: {
@@ -126,15 +135,11 @@ OC.MountConfig={
 						applicable: applicable,
 						isPersonal: isPersonal
 					},
-					async: false,
 					success: function(result) {
-						statusSpan.removeClass();
-						if (result && result.status == 'success' && result.data.message) {
-							status = true;
-							statusSpan.addClass('success');
-						} else {
-							statusSpan.addClass('error');
-						}
+						status = updateStatus(statusSpan, result);
+					},
+					error: function(result){
+						status = updateStatus(statusSpan, result);
 					}
 				});
 			}
@@ -157,7 +162,7 @@ $(document).ready(function() {
 			$(tr).find('.mountPoint input').val(suggestMountPoint(selected));
 		}
 		$(tr).addClass(backendClass);
-		$(tr).find('.status').append('<span class="waiting"></span>');
+		$(tr).find('.status').append('<span></span>');
 		$(tr).find('.backend').data('class', backendClass);
 		var configurations = $(this).data('configurations');
 		var td = $(tr).find('td.configuration');
@@ -293,3 +298,5 @@ $(document).ready(function() {
 	});
 
 });
+
+})();