Add edit contact modal. Support ability to customize contact name.

static/js/controllers/contactsmanagercontroller.js

@@ -26,6 +26,14 @@ define([], function() {
 		$scope.header = data.header;
 		$scope.contacts = [];
 		$scope.search = {};
+		$scope.tmp = {};
+		$scope.tmp.displayName = data.contact && data.contact.Status.displayName;
+		$scope.contact = data.contact;
+
+		var totalUnnamed = 0;
+		$scope.unnamed = function() {
+			return totalUnnamed += 1;
+		};
 
 		var updateContacts = function() {
 			$scope.contacts = contactData.getAll();
@@ -35,9 +43,28 @@ define([], function() {
 			updateContacts();
 		});
 
-		$scope.removeContact = function(id) {
-			contacts.remove(id);
+		var setContactInfo = function(contact) {
+			contact.Status.displayName = $scope.tmp.displayName;
+			contacts.update({Id: contact.Id, Success: contact.Success, Token: contact.Token, Userid: contact.Userid}, contact.Status);
+		};
+
+		$scope.removeContact = function() {
+			contacts.remove($scope.contact.Userid);
 			updateContacts();
+			$modalInstance.close();
+		};
+
+		$scope.edit = function(contact) {
+			$modalInstance.close(contact);
+		};
+
+		$scope.save = function() {
+			setContactInfo(data.contact);
+			$modalInstance.close();
+		};
+
+		$scope.cancel = function(contact) {
+			$modalInstance.dismiss();
 		};
 
 	}];

static/js/directives/settings.js

@@ -77,15 +77,49 @@ define(['jquery', 'underscore', 'text!partials/settings.html'], function($, _, t
 			};
 
 			$scope.openContactsManager = function() {
-				dialogs.create(
-					"/contactsmanager/main.html",
-					"ContactsmanagerController",
-					{
-						header: translation._("Contacts Manager")
-					}, {
-						wc: "contactsmanager"
-					}
-				)
+				var dlgMain = null;
+				var dlgEdit = null;
+
+				var main = function() {
+					return dialogs.create(
+						"/contactsmanager/main.html",
+						"ContactsmanagerController",
+						{
+							header: translation._("Contacts Manager")
+						}, {
+							wc: "contactsmanager"
+						}
+					);
+				};
+
+				var edit = function(contact) {
+					return dialogs.create(
+						"/contactsmanager/edit.html",
+						"ContactsmanagerController",
+						{
+							header: translation._("Edit Contact"),
+							contact: contact,
+						}, {
+							wc: "contactsmanager"
+						}
+					);
+				};
+
+				function setupContactsManager() {
+					dlgMain = main();
+					dlgMain.result.then(function(contact) {
+						if(contact && contact.Id) {
+							setupContactsManagerEdit(contact);
+						}
+					});
+				}
+				function setupContactsManagerEdit(contact) {
+					dlgEdit = edit(contact);
+					dlgEdit.result.finally(function(final) {
+						setupContactsManager();
+					});
+				}
+				setupContactsManager();
 			};
 
 			$scope.checkDefaultMediaSources = function() {

static/js/services/buddylist.js

@@ -129,7 +129,7 @@ define(['underscore', 'modernizr', 'avltree', 'text!partials/buddy.html', 'text!
 	};
 
 	// buddyList
-	return ["$window", "$compile", "playSound", "buddyData", "buddySession", "buddyPicture", "fastScroll", "mediaStream", "animationFrame", "$q", function($window, $compile, playSound, buddyData, buddySession, buddyPicture, fastScroll, mediaStream, animationFrame, $q) {
+	return ["$window", "$compile", "playSound", "buddyData", "buddySession", "buddyPicture", "fastScroll", "mediaStream", "animationFrame", "$q", '$timeout', function($window, $compile, playSound, buddyData, buddySession, buddyPicture, fastScroll, mediaStream, animationFrame, $q, $timeout) {
 
 		var buddyTemplate = $compile(templateBuddy);
 		var buddyActions = $compile(templateBuddyActions);
@@ -602,7 +602,10 @@ define(['underscore', 'modernizr', 'avltree', 'text!partials/buddy.html', 'text!
 						console.log("Injected status into contact", contact);
 					}
 					this.updateDisplay(sessionData.Id, scope, contact, "status");
-					scope.$apply();
+					// keep asyc nature but eliminate $apply conflicts
+					$timeout(function() {
+						scope.$apply();
+					}, 0, false);
 				}
 			} else {
 				// Create new scope for contact.

static/js/services/contactdata.js

@@ -54,8 +54,8 @@ define(['underscore', 'jquery'], function(underscore, $) {
 					Id: "contact-"+id,
 					Userid: userid,
 					Token: token,
-					Status: null
-				}
+					Status: status || null
+				};
 				return contact;
 			},
 			addByData: function(data) {

static/js/services/contacts.js

@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-define(['underscore', 'jquery', 'modernizr', 'sjcl', 'text!partials/contactsmanager.html'], function(underscore, $, Modernizr, sjcl, templateContactsManager) {
+define(['underscore', 'jquery', 'modernizr', 'sjcl', 'text!partials/contactsmanager.html', 'text!partials/contactsmanageredit.html'], function(underscore, $, Modernizr, sjcl, templateContactsManager, templateContactsManagerEdit) {
 
 	var Database = function(name) {
 		this.version = 3;
@@ -124,6 +124,7 @@ define(['underscore', 'jquery', 'modernizr', 'sjcl', 'text!partials/contactsmana
 
 		// Inject our templates.
 		$templateCache.put('/contactsmanager/main.html', templateContactsManager);
+		$templateCache.put('/contactsmanager/edit.html', templateContactsManagerEdit);
 
 		var Contacts = function() {
 
@@ -261,6 +262,12 @@ define(['underscore', 'jquery', 'modernizr', 'sjcl', 'text!partials/contactsmana
 			}
 		};
 
+		Contacts.prototype.update = function(request, status) {
+			console.log("contact update", status);
+			this.remove(request.Userid);
+			this.add(request, status);
+		};
+
 		return new Contacts();
 
 	}];

static/partials/contactsmanager.html

@@ -14,10 +14,12 @@
                 <div class="buddyPicture"><i class="fa fa-user"/><img ng-show="contact.Status.buddyPicture" alt ng-src="{{contact.Status.buddyPicture}}"/></div>
               </td>
               <td class="name">
-                <span>{{contact.Status.displayName}}</span>
+                <span ng-if="contact.Status.displayName">{{contact.Status.displayName}}</span>
+                <span ng-if="!contact.Status.displayName" ng-init="i = unnamed()">Unnamed Contact {{i}}</span>
               </td>
               <td class="action">
-                <button class="btn btn-danger" ng-click="removeContact(contact.Userid)">{{_('Remove')}}</button>
+                <!-- <button class="btn btn-danger" ng-click="removeContact(contact.Userid)">{{_('Remove')}}</button> -->
+                <button class="btn btn-primary" ng-click="edit(contact)">{{_('Edit')}}</button>
               </td>
             </tr>
           </tbody>

static/partials/contactsmanageredit.html

@@ -0,0 +1,31 @@
+<div>
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$close()">×</button>
+    <h3 class="modal-title" ng-bind-html="header"></h3>
+  </div>
+  <div  class="modal-header">
+    <div class="row">
+      <form class="form-horizontal">
+        <div class="form-group">
+          <label class="col-xs-4 control-label">{{_('Name')}}</label>
+          <div class="col-xs-6">
+            <input type="text" class="form-control" ng-model="tmp.displayName">
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <div class="row">
+      <div class="col-xs-2">
+        <button class="btn btn-danger" ng-click="removeContact()">{{_('Remove')}}</button>
+      </div>
+      <div class="col-xs-offset-4 col-xs-6">
+        <div class="pull-right">
+          <button class="btn btn-default" ng-click="cancel()">{{_('Cancel')}}</button> 
+          <button class="btn btn-primary" ng-click="save()">{{_('Save')}}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

static/partials/defaultdialog.html

@@ -1,5 +1,5 @@
 <div>
-	<div class="modal-header"><button type="button" class="close" ng-click="close()">×</button><h3 class="modal-title" ng-bind-html="header"></h3></div>
+	<div class="modal-header"><button type="button" class="close" ng-click="$close()">×</button><h3 class="modal-title" ng-bind-html="header"></h3></div>
 	<div class="modal-body" ng-transclude></div>
-	<div class="modal-footer"><button type="button" class="btn btn-default" ng-click="$close()">{{_("Close")}}</button></div>
-</div>
+	<div class="modal-footer"><button type="button" class="btn btn-default" ng-click="$close()">{{_("Close")}}</button><span ng-bind-html="footer"></span></div>
+</div>