Contacts: Add UI for categories

ajax/saveproperty.php

@@ -92,6 +92,7 @@ switch($element) {
 	case 'N':
 	case 'ORG':
 	case 'NICKNAME':
+	case 'CATEGORIES':
 		debug('Setting string:'.$name.' '.$value);
 		$vcard->setString($name, $value);
 		break;

index.php

@@ -48,6 +48,7 @@ OC_Util::addScript('contacts','contacts');
 OC_Util::addScript('contacts','jquery.combobox');
 OC_Util::addScript('contacts','jquery.inview');
 OC_Util::addScript('contacts','jquery.Jcrop');
+OC_Util::addScript('contacts','jquery.multi-autocomplete');
 OC_Util::addStyle('','jquery.multiselect');
 //OC_Util::addStyle('contacts','styles');
 OC_Util::addStyle('contacts','jquery.combobox');
@@ -58,6 +59,7 @@ $tmpl = new OC_Template( "contacts", "index", "user" );
 $tmpl->assign('uploadMaxFilesize', $maxUploadFilesize);
 $tmpl->assign('uploadMaxHumanFilesize', OC_Helper::humanFileSize($maxUploadFilesize));
 $tmpl->assign('property_types',$property_types);
+$tmpl->assign('categories',OC_Contacts_App::getCategories());
 $tmpl->assign('phone_types',$phone_types);
 $tmpl->assign('addressbooks', $addressbooks);
 $tmpl->assign('contacts', $contacts);

js/contacts.js

@@ -223,6 +223,7 @@ Contacts={
 					click: function() { $(this).dialog('close'); }
 				}
 			] );
+			$('#categories').multiple_autocomplete({source: categories});
 			Contacts.UI.loadListHandlers();
 		},
 		Card:{
@@ -371,7 +372,7 @@ Contacts={
 				this.loadSingleProperties();
 			},
 			loadSingleProperties:function() {
-				var props = ['BDAY', 'NICKNAME', 'ORG'];
+				var props = ['BDAY', 'NICKNAME', 'ORG', 'CATEGORIES'];
 				// Clear all elements
 				$('#ident .propertycontainer').each(function(){
 					if(props.indexOf($(this).data('element')) > -1) {
@@ -407,6 +408,12 @@ Contacts={
 								$('#contact_identity').find('#org_label').show();
 								$('#contact_identity').find('#org_value').show();
 								break;
+							case 'CATEGORIES':
+								$('#contact_identity').find('#categories').val(value);
+								$('#contact_identity').find('#categories_value').data('checksum', checksum);
+								$('#contact_identity').find('#categories_label').show();
+								$('#contact_identity').find('#categories_value').show();
+								break;
 						}
 					} else {
 						$('#contacts_propertymenu a[data-type="'+props[prop]+'"]').parent().show();
@@ -596,6 +603,7 @@ Contacts={
 					case 'NICKNAME':
 					case 'ORG':
 					case 'BDAY':
+					case 'CATEGORIES':
 						$('dl dt[data-element="'+type+'"],dd[data-element="'+type+'"]').show();
 						$('#contacts_propertymenu a[data-type="'+type+'"]').parent().hide();
 						break;

js/jquery.multi-autocomplete.js

@@ -0,0 +1,47 @@
+/**
+ * Inspired by http://jqueryui.com/demos/autocomplete/#multiple
+ */
+
+(function( $ ) {
+	$.widget('ui.multiple_autocomplete', {
+		_create: function() {
+			function split( val ) {
+				return val.split( /,\s*/ );
+			}
+			function extractLast( term ) {
+				return split( term ).pop();
+			}
+			//console.log('_create: ' + this.options['id']);
+			var self = this;
+			this.element.bind( "keydown", function( event ) {
+				if ( event.keyCode === $.ui.keyCode.TAB &&
+						$( this ).data( "autocomplete" ).menu.active ) {
+					event.preventDefault();
+				}
+			})
+			.autocomplete({
+				minLength: 0,
+				source: function( request, response ) {
+					// delegate back to autocomplete, but extract the last term
+					response( $.ui.autocomplete.filter(
+						self.options.source, extractLast( request.term ) ) );
+				},
+				focus: function() {
+					// prevent value inserted on focus
+					return false;
+				},
+				select: function( event, ui ) {
+					var terms = split( this.value );
+					// remove the current input
+					terms.pop();
+					// add the selected item
+					terms.push( ui.item.value );
+					// add placeholder to get the comma-and-space at the end
+					terms.push( "" );
+					this.value = terms.join( ", " );
+					return false;
+				}
+			});
+		},
+	});
+})( jQuery );

lib/app.php

@@ -155,6 +155,10 @@ class OC_Contacts_App {
 		}
 	}
 
+	public static function getCategories() {
+		return self::$categories->categories();
+	}
+
 	public static function setLastModifiedHeader($contact) {
 		$rev = $contact->getAsString('REV');
 		if ($rev) {

templates/index.php

@@ -1,5 +1,6 @@
 <script type='text/javascript'>
 	var totalurl = '<?php echo OC_Helper::linkToAbsolute('contacts', 'carddav.php'); ?>/addressbooks';
+	var categories = <?php echo json_encode($_['categories']); ?>;
 </script>
 <div id="controls">
 	<form>

templates/part.contact.php

@@ -13,6 +13,7 @@ $id = isset($_['id']) ? $_['id'] : '';
 		<li><a data-type="TEL"><?php echo $l->t('Phone'); ?></a></li>
 		<li><a data-type="EMAIL"><?php echo $l->t('Email'); ?></a></li>
 		<li><a data-type="ADR"><?php echo $l->t('Address'); ?></a></li>
+		<li><a data-type="CATEGORIES"><?php echo $l->t('Categories'); ?></a></li>
 	</ul>
 	</div>
 	<img  onclick="Contacts.UI.Card.export();" class="svg action" id="contacts_downloadcard" src="<?php echo image_path('', 'actions/download.svg'); ?>" title="<?php echo $l->t('Download contact');?>" />
@@ -53,6 +54,8 @@ $id = isset($_['id']) ? $_['id'] : '';
 		<dd style="display:none;" class="propertycontainer" id="nickname_value" data-element="NICKNAME"><input id="nickname" required="required" name="value[NICKNAME]" type="text" class="contacts_property" style="width:16em;" name="value" value="" placeholder="<?php echo $l->t('Enter nickname'); ?>" /><a class="delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></dd>
 		<dt style="display:none;" id="bday_label" data-element="BDAY"><label for="bday"><?php echo $l->t('Birthday'); ?></label></dt>
 		<dd style="display:none;" class="propertycontainer" id="bday_value" data-element="BDAY"><input id="bday"  required="required" name="value" type="text" class="contacts_property" value="" placeholder="<?php echo $l->t('dd-mm-yyyy'); ?>" /><a class="delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></dd>
+		<dt style="display:none;" id="categories_label" data-element="CATEGORIES"><label for="categories"><?php echo $l->t('Organization'); ?></label></dt>
+		<dd style="display:none;" class="propertycontainer" id="categories_value" data-element="CATEGORIES"><input id="categories"  required="required" name="value[CATEGORIES]" type="text" class="contacts_property" style="width:16em;" name="value" value="" placeholder="<?php echo $l->t('Categories'); ?>" /><a class="delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></dd>
 	</dl>
 	</fieldset>
 	</form>