From 2bd98c3cb7db0aa7dd7e2c64805679f84b0493df Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Thu, 2 May 2013 22:01:37 +0200
Subject: [PATCH] Contacts: Use addnew plugin for groups.

---
 css/contacts.css       |  8 ++++++++
 js/groups.js           | 26 ++++++++++++++++++++++----
 templates/contacts.php | 12 ++++--------
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/css/contacts.css b/css/contacts.css
index 6ac61d61..b635829e 100644
--- a/css/contacts.css
+++ b/css/contacts.css
@@ -112,6 +112,13 @@
 }
 
 #grouplist { z-index: 100; }
+#grouplist .oc-addnew-init { padding: 0 16px; }
+#grouplist .add-contact:before {
+	content: '+';
+	font-weight: bold;
+	font-size: 180%;
+	padding-right: 5px;
+}
 #grouplist li .action:not(.starred):not(.checked):not(.favorite):not([class^="add-"]) { display: none; padding: 0; }
 #grouplist li:not([data-type="shared"]):not(.editing):hover .action.numcontacts,
 #grouplist li:not([data-type="shared"]):not(.editing) .active.action.numcontacts { display: inline-block; }
@@ -119,6 +126,7 @@
 #grouplist li.active[data-type="category"]:not(.editing):hover .action.delete { display: inline-block; }
 #grouplist li:not(.editing) .action.delete { width: 20px; height: 20px; }
 #grouplist .group span.numcontacts { width: 30px; text-align: right; margin-right: 10px !important; }
+#grouplist li.special { height: 40px; }
 
 /* First run */
 
diff --git a/js/groups.js b/js/groups.js
index 57febdf8..5a1f71a0 100644
--- a/js/groups.js
+++ b/js/groups.js
@@ -35,13 +35,31 @@ OC.Contacts = OC.Contacts || {};
 					}
 				});
 			} else if($(event.target).is('.add-group')) {
-				self.editGroup();
+				//self.editGroup();
 			} else if($(event.target).is('.add-contact')) {
 				$.noop(); // handled elsewhere in app.js
 			} else {
 				self.selectGroup({element:$(this)});
 			}
 		});
+		var $addInput = this.$groupList.find('.add-group');
+		$addInput.addnew({
+			ok: function(event, name) {
+				console.log('add-address-book ok', name);
+				$addInput.addClass('loading');
+				self.addGroup({name:name}, function(response) {
+					console.log('response', response);
+					if(response.error) {
+						$(document).trigger('status.contact.error', {
+							message: response.message
+						});
+					} else {
+						$addInput.addnew('close');
+					}
+					$addInput.removeClass('loading');
+				});
+			}
+		});
 
 		this.$groupListItemTemplate = listItemTmpl;
 		this.categories = [];
@@ -430,7 +448,7 @@ OC.Contacts = OC.Contacts || {};
 	 * FIXME: This works fine for adding, but will need refactoring
 	 * if used for renaming.
 	 */
-	GroupList.prototype.editGroup = function(id) {
+	/*GroupList.prototype.editGroup = function(id) {
 		var self = this;
 		if(this.$editelem) {
 			console.log('Already editing, returning');
@@ -510,7 +528,7 @@ OC.Contacts = OC.Contacts || {};
 		} else {
 			throw { name: 'WrongParameterType', message: 'GroupList.editGroup only accept integers.'};
 		}
-	};
+	};*/
 
 	/**
 	 * Add a new group.
@@ -544,7 +562,7 @@ OC.Contacts = OC.Contacts || {};
 		});
 		if(exists) {
 			if(typeof cb === 'function') {
-				cb({status:'error', message:t('contacts', 'A group named {group} already exists', {group: escapeHTML(name)})});
+				cb({error:true, message:t('contacts', 'A group named {group} already exists', {group: escapeHTML(name)})});
 			}
 			return;
 		}
diff --git a/templates/contacts.php b/templates/contacts.php
index 4ab18c3e..5c4e5a4b 100644
--- a/templates/contacts.php
+++ b/templates/contacts.php
@@ -1,17 +1,13 @@
 <div id="app">
 	<div id="app-navigation" class="loading">
 		<ul id="grouplist">
-			<li>
+			<li class="special">
 				<a role="button" class="add-contact">
-					<i class="icon-plus"></i>
 					<?php p($l->t('New Contact')); ?>
 				</a>
 			</li>
-			<li>
-				<a role="button" class="add-group">
-					<i class="icon-plus"></i>
-					<?php p($l->t('New Group')); ?>
-				</a>
+			<li class="special">
+				<input class="add-group" type="text" tabindex="0" autofocus placeholder="<?php p($l->t('Group name')); ?>" title="<?php p($l->t('New Group')); ?>" />
 			</li>
 		</ul>
 		<div id="app-settings">
@@ -23,7 +19,7 @@
 				<h2 data-id="addressbooks" tabindex="0" role="button"><?php p($l->t('Address books')); ?></h2>
 					<ul class="addressbooklist">
 					</ul>
-					<input type="text" id="add-address-book" placeholder="<?php p($l->t('Display name')); ?>" title="<?php p($l->t('Add Address Book')); ?>" />
+					<input type="text" tabindex="0" autofocus id="add-address-book" placeholder="<?php p($l->t('Display name')); ?>" title="<?php p($l->t('Add Address Book')); ?>" />
 				</div>
 				<div id="import">
 				<h2 data-id="import" tabindex="0" role="button"><?php p($l->t('Import')); ?></h2>