Added rename addressbook functionality.

4 files changed, 51 insertions, 2 deletions

diff --git a/css/public/style.css b/css/public/style.css
index f5764886..640a2c11 100644
--- a/css/public/style.css
+++ b/css/public/style.css
@@ -314,6 +314,10 @@ avatar.failed {
 }
 
 /* addressbook settings */
+input.renameAddressBookInput {
+	width: calc(100% - 32px) !important;
+}
+
 ul.addressBookList > li {
 	padding: 6px 0;
 	display: flex;
diff --git a/js/components/addressBook/addressBook_controller.js b/js/components/addressBook/addressBook_controller.js
index 405b691c..fbfc106c 100644
--- a/js/components/addressBook/addressBook_controller.js
+++ b/js/components/addressBook/addressBook_controller.js
@@ -8,12 +8,15 @@ angular.module('contactsApp')
 		clickToCopy: t('contacts', 'Click to copy the URL into your clipboard'),
 		shareAddressbook: t('contacts', 'Toggle share'),
 		deleteAddressbook: t('contacts', 'Delete'),
+		renameAddressbook: t('contacts', 'Rename'),
 		shareInputPlaceHolder: t('contacts', 'Share with users or groups'),
 		delete: t('contacts', 'Delete'),
 		canEdit: t('contacts', 'can edit'),
 		close: t('contacts', 'Close')
 	};
 
+	ctrl.editing = false;
+
 	ctrl.tooltipIsOpen = false;
 	ctrl.tooltipTitle = ctrl.t.clickToCopy;
 	ctrl.showInputUrl = false;
@@ -39,6 +42,15 @@ angular.module('contactsApp')
 		$('#addressBookUrl_'+ctrl.addressBook.ctag).select();
 	};
 
+	ctrl.renameAddressBook = function() {
+		AddressBookService.rename(ctrl.addressBook, ctrl.addressBook.displayName);
+		ctrl.editing = false;
+	};
+
+	ctrl.edit = function() {
+		ctrl.editing = true;
+	};
+
 	/* globals oc_config */
 	function compareVersion(version1, version2) {
 		for (var i = 0; i < Math.max(version1.length, version2.length); i++) {
diff --git a/js/components/select_directive.js b/js/components/select_directive.js
new file mode 100644
index 00000000..3e60d170
--- /dev/null
+++ b/js/components/select_directive.js
@@ -0,0 +1,23 @@
+angular.module('contactsApp')
+.directive('selectExpression', function ($timeout) {
+	return {
+		restrict: 'A',
+		link: {
+			post: function postLink(scope, element, attrs) {
+				scope.$watch(attrs.selectExpression, function () {
+					if (attrs.selectExpression) {
+						if (scope.$eval(attrs.selectExpression)) {
+							$timeout(function () {
+								if (element.is('input')) {
+									element.select();
+								} else {
+									element.find('input').select();
+								}
+							}, 100); //need some delay to work with ng-disabled
+						}
+					}
+				});
+			}
+		}
+	};
+});
diff --git a/templates/addressBook.html b/templates/addressBook.html
index 73c2aca1..eb34218e 100644
--- a/templates/addressBook.html
+++ b/templates/addressBook.html
@@ -1,5 +1,9 @@
-<span class="addressBookName" title="{{ctrl.addressBook.displayName}}">{{ctrl.addressBook.displayName}}</span>
-<span class="utils">
+<form ng-submit="ctrl.renameAddressBook()" ng-show="ctrl.editing">
+	<input select-expression="ctrl.editing" placeholder="{{ctrl.t.addressBookName}}" class="renameAddressBookInput" ng-model="ctrl.addressBook.displayName" type="text" />
+	<input type="submit" value="" class="renameAddressBookSubmit icon-confirm action pull-right" />
+</form>
+<span class="addressBookName" title="{{ctrl.addressBook.displayName}}" ng-hide="ctrl.editing">{{ctrl.addressBook.displayName}}</span>
+<span class="utils" ng-hide="ctrl.editing">
 	<span class="action">
 		<span
 			class="addressbooklist-icon icon-shared"
@@ -34,6 +38,12 @@
 					<span>{{ctrl.t.download}}</span>
 				</a>
 			</li>
+			<li>
+				<button ng-click="ctrl.edit()">
+					<span class="icon icon-rename"></span>
+					<span>{{ctrl.t.renameAddressbook}}</span>
+				</button>
+			</li>
 			<li ng-if="ctrl.list.length > 1">
 				<button ng-click="ctrl.deleteAddressBook()">
 					<span class="icon icon-delete"></span>