Contacts: Refactored adding single contact to group. Closes #443

css/contacts.css

@@ -31,8 +31,8 @@
 }
 #content textarea { font-family: inherit; }
 
-#content input:-moz-placeholder #content ::-moz-placeholder, #content input[placeholder], #content input:placeholder, #content input:-ms-input-placeholder, #content input::-webkit-input-placeholder, #content input:-moz-placeholder { 
+#content ::-moz-placeholder, #content input:-moz-placeholder, #content input[placeholder], #content input:placeholder, #content input:-ms-input-placeholder, #content input::-webkit-input-placeholder, #content input:-moz-placeholder { 
-	color: #aaa; 
+	color: #bbb; 
 	text-overflow: ellipsis;
 }
 
@@ -146,6 +146,11 @@
 
 /* reset box-sizing for multiSelect */
 #content div.multiselect, #content div.multiselect > * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
+
+/* Reset values for jquery.multiselect */
+.ui-multiselect-checkboxes label { width: 100%; color: #333; font-size: 1em !important; }
+.ui-multiselect-checkboxes input[type="checkbox"] { margin: 3px !important; }
+
 #content .multiselectoptions > li > * { 
 	-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; 
 	color: #888888; 

index.php

@@ -48,6 +48,7 @@ $freeSpace=max($freeSpace, 0);
 $maxUploadFilesize = min($maxUploadFilesize, $freeSpace);
 
 OCP\Util::addscript('contacts', 'multiselect');
+OCP\Util::addscript('', 'jquery.multiselect');
 OCP\Util::addscript('', 'oc-vcategories');
 OCP\Util::addscript('contacts', 'modernizr.custom');
 OCP\Util::addscript('contacts', 'app');
@@ -58,6 +59,7 @@ OCP\Util::addscript('contacts', 'jquery.combobox');
 OCP\Util::addscript('files', 'jquery.fileupload');
 OCP\Util::addscript('contacts', 'jquery.Jcrop');
 OCP\Util::addStyle('contacts', 'multiselect');
+OCP\Util::addStyle('', 'jquery.multiselect');
 OCP\Util::addStyle('contacts', 'jquery.combobox');
 OCP\Util::addStyle('contacts', 'jquery.Jcrop');
 OCP\Util::addStyle('contacts', 'contacts');

js/app.js

@@ -389,8 +389,14 @@ OC.Contacts = OC.Contacts || {
 		});
 
 		$(document).bind('request.contact.addtogroup', function(e, data) {
-			console.log('contact', data.id, 'request.contact.addtogroup');
+			self.groups.addTo(data.id, data.groupid, function(response) {
-			self.groups.addTo(data.id, data.groupid);
+				console.log('contact', data.id, 'request.contact.addtogroup', response);
+			});
+		});
+
+		$(document).bind('request.contact.removefromgroup', function(e, data) {
+			console.log('contact', data.id, 'request.contact.removefromgroup');
+			self.groups.removeFrom(data.id, data.groupid);
 		});
 
 		$(document).bind('request.contact.export', function(e, data) {

js/contacts.js

@@ -225,10 +225,6 @@ OC.Contacts = OC.Contacts || {};
 		var q = '';
 		if(params.obj) {
 			obj = params.obj;
-			if($(obj).is('select')) {
-				console.warn('Group adding will have to be refactored.');
-				return;
-			}
 			q = this.queryStringFor(obj);
 			element = this.propertyTypeFor(obj);
 		} else {
@@ -476,17 +472,17 @@ OC.Contacts = OC.Contacts || {};
 				self.access.id = parseInt(jsondata.data.aid);
 				self.data = jsondata.data.details;
 				// Add contact to current group
-				if(self.groupprops && self.groupprops.currentgroup.name !== 'all'
+				if(self.groupprops && self.groupprops.currentgroup.id !== 'all'
-					&& self.groupprops.currentgroup.name !== 'fav') {
+					&& self.groupprops.currentgroup.id !== 'fav') {
 					if(!self.data.CATEGORIES) {
-						self.data.CATEGORIES = [{value:[self.groupprops.currentgroup.name], parameters:[]}];
+						self.addToGroup(self.groupprops.currentgroup.name);
-						// Save to vCard
-						self.saveProperty({name:'CATEGORIES', value:self.data.CATEGORIES[0].value.join(',') });
-						// Tell OC.Contacts to save in backend
 						$(document).trigger('request.contact.addtogroup', {
 							id: self.id,
 							groupid: self.groupprops.currentgroup.id
 						});
+						self.$groupSelect.find('option[value="' + self.groupprops.currentgroup.id + '"]')
+							.attr('selected', 'selected');
+						self.$groupSelect.multiselect('refresh');
 					}
 				}
 				$(document).trigger('status.contact.added', {
@@ -579,25 +575,16 @@ OC.Contacts = OC.Contacts || {};
 		return $container.is('input')
 			? $container.val()
 			: (function() {
-				if($container.is('select[data-element="categories"]')) {
+				var $elem = $container.find('textarea.value,input.value:not(:checkbox)');
-					console.warn('Group adding will have to be refactored.');
+				console.assert($elem.length > 0, 'Couldn\'t find value for ' + $container.data('element'));
-					retval = {};
+				if($elem.length === 1) {
-					$.each($container.find(':selected'), function(idx, e) {
+					return $elem.val();
-						retval[$(e).val()] = $(e).text();
+				} else if($elem.length > 1) {
+					var retval = [];
+					$.each($elem, function(idx, e) {
+						retval.push($(e).val());
 					});
 					return retval;
-				} else {
-					var $elem = $container.find('textarea.value,input.value:not(:checkbox)');
-					console.assert($elem.length > 0, 'Couldn\'t find value for ' + $container.data('element'));
-					if($elem.length === 1) {
-						return $elem.val();
-					} else if($elem.length > 1) {
-						var retval = [];
-						$.each($elem, function(idx, e) {
-							retval.push($(e).val());
-						});
-						return retval;
-					}
 				}
 			})();
 	};
@@ -660,13 +647,33 @@ OC.Contacts = OC.Contacts || {};
 		var self = this;
 		this.groupprops = groupprops;
 		
-		var buildGroupSelect = function($groupSelect, availableGroups) {
+		var buildGroupSelect = function(availableGroups) {
+			//this.$groupSelect.find('option').remove();
 			$.each(availableGroups, function(idx, group) {
 				var $option = $('<option value="' + group.id + '">' + group.name + '</option>');
 				if(self.inGroup(group.name)) {
 					$option.attr('selected', 'selected');
 				}
-				$groupSelect.append($option);
+				self.$groupSelect.append($option);
+			});
+			self.$groupSelect.multiselect({
+				header: false,
+				selectedList: 3,
+				noneSelectedText: self.$groupSelect.attr('title'),
+				selectedText: t('contacts', '# groups')
+			});
+			self.$groupSelect.bind('multiselectclick', function(event, ui) {
+				var action = ui.checked ? 'addtogroup' : 'removefromgroup';
+				console.assert(typeof self.id === 'number', 'ID is not a number')
+				$(document).trigger('request.contact.' + action, {
+					id: self.id,
+					groupid: parseInt(ui.value)
+				});
+				if(ui.checked) {
+					self.addToGroup(ui.text);
+				} else {
+					self.removeFromGroup(ui.text);
+				}
 			});
 		};
 		
@@ -699,8 +706,7 @@ OC.Contacts = OC.Contacts || {};
 		});
 		
 		this.$groupSelect = this.$fullelem.find('#contactgroups');
-		buildGroupSelect(this.$groupSelect, groupprops.groups);
+		buildGroupSelect(groupprops.groups);
-		this.$groupSelect.multiSelect();
 		
 		this.$addMenu = this.$fullelem.find('#addproperty');
 		this.$addMenu.on('change', function(event) {
@@ -1656,7 +1662,7 @@ OC.Contacts = OC.Contacts || {};
 					self.contacts[parseInt(contact.id)]
 						= new Contact(
 							self,
-							contact.id,
+							parseInt(contact.id),
 							self.addressbooks[parseInt(contact.aid)],
 							contact.data,
 							self.$contactListItemTemplate,

js/groups.js

@@ -206,6 +206,8 @@ OC.Contacts = OC.Contacts || {};
 					cb({status:'error', message:t('contacts', 'Contacts are already in this group.')});
 				}
 			}
+		} else {
+			console.warn('Invalid data type: ' + typeof contactid);
 		}
 		if(doPost) {
 			$.post(OC.filePath('contacts', 'ajax', 'categories/addto.php'), {contactids: ids, categoryid: groupid},function(jsondata) {

templates/contacts.php

@@ -175,9 +175,6 @@
 			<div class="singleproperties">
 			<input data-element="fn" class="fullname value propertycontainer" type="text" name="value" value="{name}" required />
 			<a class="action edit"></a>
-			<div class="groupscontainer propertycontainer" data-element="categories">
-				<select id="contactgroups" class="value" title="<?php echo $l->t('Select groups'); ?>" name="value" multiple></select>
-			</div>
  			<fieldset class="n hidden editor propertycontainer" data-element="n">
 			<ul>
 				<li>
@@ -199,6 +196,9 @@
 			<input class="value" type="hidden" id="n_3" name="value[3]" value="{n3}" />
 			<input class="value" type="hidden" id="n_4" name="value[4]" value="{n4}" />
 			</fieldset>
+			<div class="groupscontainer propertycontainer" data-element="categories">
+				<select id="contactgroups" title="<?php echo $l->t('Select groups'); ?>" name="value" multiple></select>
+			</div>
 			<dl class="form">
 				<dt data-element="nickname">
 					<?php echo $l->t('Nickname'); ?>