Import service, screen and design

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

8 files changed, 64 insertions, 6 deletions

diff --git a/js/components/contactImport/contactImport_directive.js b/js/components/contactImport/contactImport_directive.js
index 79dfa6f8..e635d63c 100644
--- a/js/components/contactImport/contactImport_directive.js
+++ b/js/components/contactImport/contactImport_directive.js
@@ -1,5 +1,5 @@
 angular.module('contactsApp')
-.directive('contactimport', function(ContactService) {
+.directive('contactimport', function(ContactService, ImportService, $rootScope) {
 	return {
 		link: function(scope, element, attrs, ctrl) {
 			var input = element.find('input');
@@ -9,17 +9,23 @@ angular.module('contactsApp')
 
 					reader.addEventListener('load', function () {
 						scope.$apply(function () {
-							ContactService.import.call(ContactService, reader.result, file.type, ctrl.selectedAddressBook, function (progress) {
+							ContactService.import.call(ContactService, reader.result, file.type, ctrl.selectedAddressBook, function (progress, user) {
 								if (progress === 1) {
 									ctrl.importText = ctrl.t.importText;
-									ctrl.status = '';
 									ctrl.loadingClass = 'icon-upload';
+									ImportService.importPercent = 0;
+									ImportService.importing = false;
+									ImportService.selectedAddressBook = '';
 								} else {
 									ctrl.importText = ctrl.t.importingText;
-									ctrl.status = parseInt(Math.floor(progress * 100)) + '%';
 									ctrl.loadingClass = 'icon-loading-small';
+									ImportService.importPercent = parseInt(Math.floor(progress * 100));
+									ImportService.importing = true;
+									ImportService.selectedAddressBook = ctrl.selectedAddressBook.displayName;
 								}
 								scope.$apply();
+								/* Broadcast service update */
+								$rootScope.$broadcast('importing', true);
 							});
 						});
 					}, false);
diff --git a/js/components/contactList/contactList_controller.js b/js/components/contactList/contactList_controller.js
index a7234f6d..e1aacbb3 100644
--- a/js/components/contactList/contactList_controller.js
+++ b/js/components/contactList/contactList_controller.js
@@ -81,7 +81,7 @@ angular.module('contactsApp')
 					uid: ev.uid
 				});
 			}
-			else if (ev.event === 'import') {
+			else if (ev.event === 'importend') {
 				$route.updateParams({
 					gid: t('contacts', 'All contacts')
 				});
diff --git a/js/components/importScreen/importScreen_controller.js b/js/components/importScreen/importScreen_controller.js
new file mode 100644
index 00000000..c5dd1c0e
--- /dev/null
+++ b/js/components/importScreen/importScreen_controller.js
@@ -0,0 +1,18 @@
+angular.module('contactsApp')
+.controller('importscreenCtrl', function($scope, ImportService) {
+	var ctrl = this;
+
+	ctrl.t = {
+		importingTo : t('contacts', 'Currently importing into'),
+		importingText : t('contacts', 'Importing...'),
+		selectAddressbook : t('contacts', 'Select your addressbook')
+	};
+
+	// Broadcast update
+	$scope.$on('importing', function () {
+		ctrl.selectedAddressBook = ImportService.selectedAddressBook;
+		ctrl.importing = ImportService.importing;
+		ctrl.importPercent = ImportService.importPercent;
+	});
+
+});
diff --git a/js/components/importScreen/importScreen_directive.js b/js/components/importScreen/importScreen_directive.js
new file mode 100644
index 00000000..790c6254
--- /dev/null
+++ b/js/components/importScreen/importScreen_directive.js
@@ -0,0 +1,11 @@
+angular.module('contactsApp')
+.directive('importscreen', function() {
+	return {
+		restrict: 'EA', // has to be an attribute to work with core css
+		scope: {},
+		controller: 'importscreenCtrl',
+		controllerAs: 'ctrl',
+		bindToController: {},
+		templateUrl: OC.linkTo('contacts', 'templates/importScreen.html')
+	};
+});
diff --git a/js/services/contact_service.js b/js/services/contact_service.js
index 70874c5f..6af7b696 100644
--- a/js/services/contact_service.js
+++ b/js/services/contact_service.js
@@ -210,6 +210,9 @@ angular.module('contactsApp')
 			}
 			return;
 		}
+
+		notifyObservers('importstart');
+
 		var num = 1;
 		for(var i in singleVCards) {
 			var newContact = new Contact(addressBook, {addressData: singleVCards[i]});
@@ -229,7 +232,7 @@ angular.module('contactsApp')
 				num++;
 				/* Import is over, let's notify */
 				if(num === singleVCards.length) {
-					notifyObservers('import');
+					notifyObservers('importend');
 				}
 			});
 		}
diff --git a/js/services/import_service.js b/js/services/import_service.js
new file mode 100644
index 00000000..a3f89308
--- /dev/null
+++ b/js/services/import_service.js
@@ -0,0 +1,13 @@
+angular.module('contactsApp')
+.service('ImportService', function() {
+
+	this.importing = false;
+	this.selectedAddressBook = t('contacts', 'Import into');
+	this.importPercent = 0;
+
+	this.t = {
+		importText : t('contacts', 'Import into'),
+		importingText : t('contacts', 'Importing...')
+	};
+
+});
\ No newline at end of file
diff --git a/templates/importScreen.html b/templates/importScreen.html
new file mode 100644
index 00000000..3559631b
--- /dev/null
+++ b/templates/importScreen.html
@@ -0,0 +1,6 @@
+<div id="importscreen-wrapper" ng-show="ctrl.importing">
+	<div id="importscreen-content">
+		<h3 id="importscreen-title">{{ctrl.t.importingTo}} {{ctrl.selectedAddressBook}}</h3>
+		<progress id="importscreen-progress" max="100" value="{{ctrl.importPercent}}"></progress>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/main.php b/templates/main.php
index 1f4a7f24..da634fa2 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -51,5 +51,6 @@ vendor_style('select2/select2');
 			<contactlist></contactlist>
 		</div>
 		<div class="app-content-detail" ng-view></div>
+		<importscreen></importscreen>
 	</div>
 </div>