Finished implementing favorites.

ajax/categories/list.php

@@ -15,7 +15,7 @@ $categories = $catmgr->categories(OC_VCategories::FORMAT_MAP);
 foreach($categories as &$category) {
 	$ids = array();
 	$contacts = $catmgr->itemsForCategory(
-			$category['name'], 
+			$category['name'],
 			array(
 				'tablename' => '*PREFIX*contacts_cards',
 				'fields' => array('id',),
@@ -26,4 +26,12 @@ foreach($categories as &$category) {
 	$category['contacts'] = $ids;
 }
 
-OCP\JSON::success(array('data' => array('categories'=>$categories)));
+$favorites = $catmgr->getFavorites();
+
+OCP\JSON::success(array(
+	'data' => array(
+		'categories' => $categories,
+		'favorites' => $favorites,
+		)
+	)
+);

css/contacts.css

@@ -54,10 +54,12 @@ dl.form { display: inline-block; width: auto; margin: 0; padding: 0; cursor: nor
 .download { background:url('%webroot%/core/img/actions/download.svg') no-repeat center; }
 .cloud { background:url('%webroot%/core/img/places/picture.svg') no-repeat center; }
 .globe { background:url('%webroot%/core/img/actions/public.svg') no-repeat center; }
+.starred { display: inline-block; height: 22px; width: 22px; padding: 0; margin: 0; background:url('%appswebroot%/contacts/img/starred.png') no-repeat center; }
 .transparent{ opacity: 0.6; }
 .float { float: left; display: inline-block; width: auto; }
 .break { clear: both; }
 .loading { background: url('%webroot%/core/img/loading.gif') no-repeat center !important; /*cursor: progress; */ cursor: wait; }
+.wait { opacity: cursor: wait; }
 .control {
     border: 1px solid #DDDDDD;
     border-radius: 0.3em;
@@ -87,7 +89,7 @@ dl.addresscard .action { float: right; }
 /* Properties */
 
 .fullname { font-weight:bold; font-size:1.5em; width: 18em; }
-.singleproperties{ display: inline-block; float: left; width: 20em;}
+.singleproperties{ display: inline-block; float: left; width: 25em;}
 
 .propertylist li.propertycontainer { white-space: nowrap; min-width: 38em; display: block; clear: both; }
 .propertylist li.propertycontainer > .listactions { display: inline-block; position: absolute; clear: none; opacity: 0; }
@@ -153,7 +155,9 @@ input.propertytype { float: left; font-size: .8em; width: 8em !important; direct
 #phototools li a { float:left; cursor:pointer; width:22px; height:22px; opacity: 0.6; }
 #phototools li a:hover { opacity: 0.8; }
 #contactphoto_fileupload, #import_fileupload { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; z-index:1001; width:0; height:0;}
-
+.favorite { display: inline-block; float: left; height: 20px; width: 20px; background:url('%appswebroot%/contacts/img/inactive_star.png') no-repeat center; }
+.favorite.active, .favorite:hover { background:url('%appswebroot%/contacts/img/active_star.png') no-repeat center; }
+.favorite.inactive { background:url('%appswebroot%/contacts/img/inactive_star.png') no-repeat center; }
 /* Header */
 
 #contactsheader { position: fixed; padding: 0; margin:0; top:3.5em; left: 32.5em; right: 0; height: 4em; border-bottom: 1px solid #DDDDDD; z-index: 50; }
@@ -174,8 +178,8 @@ input.propertytype { float: left; font-size: .8em; width: 8em !important; direct
 
 /* Contact layout */
 
-#contact > ul { 
+#contact > ul {
-	font-size: 10px;  
+	font-size: 10px;
 	/*display: table;
 	border-spacing: 1em;
 	border: thin solid black;*/
@@ -184,7 +188,7 @@ input.propertytype { float: left; font-size: .8em; width: 8em !important; direct
 	display: inline-block;
 	padding: 1em;
 	/*display: table-cell;*/
-}  
+}
 
 #rightcontent footer { padding: 1em; }
 

js/app.js

@@ -21,7 +21,7 @@ if (typeof Object.create !== 'function') {
 
 Array.prototype.clean = function(deleteValue) {
 	for (var i = 0; i < this.length; i++) {
-		if (this[i] == deleteValue) {         
+		if (this[i] == deleteValue) {
 			this.splice(i, 1);
 			i--;
 		}
@@ -110,10 +110,57 @@ GroupList.prototype.findById = function(id) {
 	return this.$groupList.find('h3[data-id="' + id + '"]');
 }
 
+GroupList.prototype.isFavorite = function(contactid) {
+	var $groupelem = this.findById('fav');
+	var contacts = $groupelem.data('contacts');
+	return (contacts.indexOf(contactid) !== -1);
+}
+
+GroupList.prototype.setAsFavorite = function(contactid, state, cb) {
+	contactid = parseInt(contactid);
+	var $groupelem = this.findById('fav');
+	var contacts = $groupelem.data('contacts');
+	if(state) {
+		OCCategories.addToFavorites(contactid, 'contact', function(jsondata) {
+			if(jsondata.status === 'success') {
+				contacts.push(contactid);
+				$groupelem.data('contacts', contacts);
+				$groupelem.find('.numcontacts').text(contacts.length);
+				if(contacts.length > 0 && $groupelem.is(':hidden')) {
+					$groupelem.show();
+				}
+			}
+			if(typeof cb === 'function') {
+				cb(jsondata);
+			} else if(jsondata.status !== 'success') {
+				OC.notify({message:t('contacts', jsondata.data.message)});
+			}
+		});
+	} else {
+		OCCategories.removeFromFavorites(contactid, 'contact', function(jsondata) {
+			if(jsondata.status === 'success') {
+				contacts.splice(contacts.indexOf(contactid), 1);
+				//console.log('contacts', contacts, contacts.indexOf(id), contacts.indexOf(String(id)));
+				$groupelem.data('contacts', contacts);
+				$groupelem.find('.numcontacts').text(contacts.length);
+				if(contacts.length === 0 && $groupelem.is(':visible')) {
+					$groupelem.hide();
+				}
+			}
+			if(typeof cb === 'function') {
+				cb(jsondata);
+			} else if(jsondata.status !== 'success') {
+				OC.notify({message:t('contacts', jsondata.data.message)});
+			}
+		});
+	}
+}
+
 GroupList.prototype.addTo = function(contactid, groupid, cb) {
+	console.log('GroupList.addTo', contactid, groupid);
 	var $groupelem = this.findById(groupid);
 	var contacts = $groupelem.data('contacts');
-	if(contacts.indexOf(String(contactid)) === -1) {
+	if(contacts.indexOf(contactid) === -1) {
 		$.post(OC.filePath('contacts', 'ajax', 'categories/addto.php'), {contactid: contactid, categoryid: groupid},function(jsondata) {
 			if(!jsondata) {
 				OC.notify({message:t('contacts', 'Network or server error. Please inform administrator.')});
@@ -211,8 +258,8 @@ GroupList.prototype.addGroup = function(name, contacts, cb) {
 		if (jsondata && jsondata.status == 'success') {
 			var tmpl = self.$groupListItemTemplate;
 			var $elem = (tmpl).octemplate({
-				id: jsondata.data.id, 
+				id: jsondata.data.id,
-				type: 'category', 
+				type: 'category',
 				num: contacts.length,
 				name: name,
 			})
@@ -246,19 +293,32 @@ GroupList.prototype.loadGroups = function(numcontacts, cb) {
 	var self = this;
 	var $groupList = this.$groupList;
 	var tmpl = this.$groupListItemTemplate;
-	
+
 	tmpl.octemplate({id: 'all', type: 'all', num: numcontacts, name: t('contacts', 'All')}).appendTo($groupList);
-	tmpl.octemplate({id: 'fav', type: 'fav', num: '', name: t('contacts', 'Favorites')}).appendTo($groupList);
 	$.getJSON(OC.filePath('contacts', 'ajax', 'categories/list.php'), {}, function(jsondata) {
 		if (jsondata && jsondata.status == 'success') {
+			// Favorites
+			var contacts = $.map(jsondata.data.favorites, function(c) {return parseInt(c)});
+			var $elem = tmpl.octemplate({
+				id: 'fav',
+				type: 'fav',
+				num: contacts.length,
+				name: t('contacts', 'Favorites')
+			}).appendTo($groupList);
+			$elem.data('contacts', contacts).find('.numcontacts').before('<span class="starred" />');
+			if(contacts.length === 0) {
+				$elem.hide();
+			}
+			console.log('favorites', $elem.data('contacts'));
+			// Normal groups
 			$.each(jsondata.data.categories, function(c, category) {
 				var contacts = $.map(category.contacts, function(c) {return parseInt(c)});
 				var $elem = (tmpl).octemplate({
-					id: category.id, 
+					id: category.id,
-					type: 'category', 
+					type: 'category',
 					num: contacts.length,
 					name: category.name,
-				})
+				});
 				self.categories.push({id: category.id, name: category.name});
 				$elem.data('contacts', contacts)
 				$elem.data('name', category.name)
@@ -283,8 +343,8 @@ OC.Contacts = OC.Contacts || {
 		this.isScrolling = false;
 		this.cacheElements();
 		this.Contacts = new OC.Contacts.ContactList(
-			this.$contactList, 
+			this.$contactList,
-			this.$contactListItemTemplate, 
+			this.$contactListItemTemplate,
 			this.$contactFullTemplate,
 			this.detailTemplates
 		);
@@ -384,7 +444,7 @@ OC.Contacts = OC.Contacts || {
 	},
 	bindEvents: function() {
 		var self = this;
-		
+
 		// App specific events
 		$(document).bind('status.contact.deleted', function(e, data) {
 			var id = parseInt(data.id);
@@ -486,6 +546,24 @@ OC.Contacts = OC.Contacts || {
 			console.log('request.addressbook.activate', result);
 			self.Contacts.showFromAddressbook(result.id, result.activate);
 		});
+
+		$(document).bind('request.setasfavorite', function(e, result) {
+			console.log('request.setasfavorite', result);
+			self.Groups.setAsFavorite(result.id, result.state, function(jsondata) {
+				if(jsondata.status === 'success') {
+					$(document).trigger('status.contact.favoritestate', {
+						status: 'success',
+						id: result.id,
+						state: result.state,
+					});
+				} else {
+					OC.notify({message:t('contacts', jsondata.data.message)});
+					$(document).trigger('status.contact.favoritestate', {
+						status: 'error',
+					});
+				}
+			});
+		});
 		// mark items whose title was hid under the top edge as read
 		/*this.$rightContent.scroll(function() {
 			// prevent too many scroll requests;
@@ -534,7 +612,7 @@ OC.Contacts = OC.Contacts || {
 			var $opt = $(this).find('option:selected');
 			var action = $opt.parent().data('action');
 			var ids, buildnow = false;
-			
+
 			if($opt.val() === 'add') {
 				console.log('add group...');
 				self.$groups.val(-1);
@@ -553,7 +631,7 @@ OC.Contacts = OC.Contacts || {
 							var contacts = self.Contacts.getSelectedContacts();
 							self.Groups.addGroup(
 								$dlg.find('input:text').val(),
-								contacts, 
+								contacts,
 								function(response) {
 									if(response.result === 'success') {
 										for(var id in contacts) {
@@ -581,7 +659,7 @@ OC.Contacts = OC.Contacts || {
 				});
 				return;
 			}
-			
+
 			// If a contact is open the action is only applied to that,
 			// otherwise on all selected items.
 			if(self.currentid) {
@@ -660,12 +738,19 @@ OC.Contacts = OC.Contacts || {
 			self.$toggleAll.show();
 			self.showActions(['add', 'delete']);
 			$(this).addClass('active');
-			if($(this).data('type') === 'category') {
+			var gtype = $(this).data('type');
+			var gid = $(this).data('id');
+			if(gtype === 'category' ||  gtype === 'fav') {
 				console.log('contacts', $(this).data('contacts'));
 				self.Contacts.showContacts($(this).data('contacts'));
 			} else {
-				self.Contacts.showContacts($(this).data('id'));
+				self.Contacts.showContacts(gid);
 			}
+			$.post(OC.filePath('contacts', 'ajax', 'setpreference.php'), {'key':'lastgroup', 'value':gid}, function(jsondata) {
+				if(jsondata.status !== 'success') {
+					OC.notify({message: jsondata.data.message});
+				}
+			});
 			self.$rightContent.scrollTop(0);
 		});
 		// Contact list. Either open a contact or perform an action (mailto etc.)
@@ -833,7 +918,7 @@ OC.Contacts = OC.Contacts || {
 			}
 
 		});
-		
+
 		$('[title]').tipsy(); // find all with a title attribute and tipsy them
 	},
 	jumpToContact: function(id) {
@@ -853,6 +938,16 @@ OC.Contacts = OC.Contacts || {
 		this.$contactList.hide();
 		this.$toggleAll.hide();
 		var $contactelem = this.Contacts.showContact(this.currentid);
+		var self = this;
+		// FIXME: This should (maybe) be an argument to the Contact
+		setTimeout(function() {
+			var state = self.Groups.isFavorite(self.currentid);
+			$(document).trigger('status.contact.favoritestate', {
+				status: 'success',
+				id: self.currentid,
+				state: state,
+			});
+		}, 2000);
 		this.$rightContent.prepend($contactelem);
 		this.buildGroupSelect();
 	},
@@ -862,7 +957,7 @@ OC.Contacts = OC.Contacts || {
 	cloudPhotoSelected:function(id, path) {
 		var self = this;
 		console.log('cloudPhotoSelected, id', id)
-		$.getJSON(OC.filePath('contacts', 'ajax', 'oc_photo.php'), 
+		$.getJSON(OC.filePath('contacts', 'ajax', 'oc_photo.php'),
 				  {path: path, id: id},function(jsondata) {
 			if(jsondata.status == 'success') {
 				//alert(jsondata.data.page);
@@ -905,7 +1000,7 @@ OC.Contacts = OC.Contacts || {
 		var clearCoords = function() {
 			$('#coords input').val('');
 		};
-		
+
 		var self = this;
 		if(!this.$cropBoxTmpl) {
 			this.$cropBoxTmpl = $('#cropBoxTemplate');
@@ -963,7 +1058,7 @@ OC.Contacts = OC.Contacts || {
 			if(jsondata && jsondata.status === 'success') {
 				// load cropped photo.
 				$(document).trigger('status.contact.photoupdated', {
-					id: jsondata.data.id, 
+					id: jsondata.data.id,
 				});
 			} else {
 				if(!jsondata) {
@@ -1012,7 +1107,7 @@ OC.Contacts = OC.Contacts || {
 	$.fn.octemplate = function(options) {
 		if ( this.length ) {
 			var _template = Object.create(Template);
-			return _template.init(options, this); 
+			return _template.init(options, this);
 		}
 	};
 

js/contacts.js

@@ -291,6 +291,37 @@ OC.Contacts = OC.Contacts || {};
 			console.log('change', event);
 			self.saveProperty({obj:event.target});
 		});
+		this.$fullelem.on('click', '.favorite', function(event) {
+			if(typeof self.is_favorite === 'undefined') {
+				console.log('Favorite state not set yet.');
+				self.is_favorite == false;
+			}
+			console.log('favorite', event);
+			$(this).addClass('wait');
+			$(document).trigger('request.setasfavorite', {
+				id: self.id,
+				state: !self.is_favorite,
+			});
+		});
+		$(document).bind('status.contact.favoritestate', function(e, result) {
+			console.log('status.contact.favoritestate', result);
+			if(parseInt(result.id) !== parseInt(self.id)) {
+				console.log(result.id, 'is not me:', self.id);
+				return;
+			}
+			var $favstar = self.$fullelem.find('.favorite');
+			$favstar.removeClass('wait');
+			if(result.status === 'success') {
+				self.is_favorite = result.state;
+				if(result.state === true) {
+					$favstar.removeClass('inactive').addClass('active');
+				} else {
+					$favstar.removeClass('active').addClass('inactive');
+				}
+			} else {
+				// TODO:...
+			}
+		});
 		this.$fullelem.find('form').on('submit', function(event) {
 			console.log('submit', this, event);
 			return false;

templates/contacts.php

@@ -120,6 +120,7 @@
 					<li><a class="svg cloud" title="<?php echo $l->t('Select photo from ownCloud'); ?>"></a></li>
 				</ul>
 			</div>
+			<a class="favorite"></a>
 			<div class="singleproperties">
 			<input class="fullname value propertycontainer" data-element="fn" type="text" name="value" value="{name}" />
 			<dl class="form">